<template>
  <div class="activity-detail">
    <!-- 活动头部信息 -->
    <section class="activity-header">
      <div class="activity-banner">
        <img :src="activityInfo.activityPic" :alt="activityInfo.activityName" />
        <div class="activity-time">
          <i class="icon-time"></i>
          {{ activityInfo.startTime }} - {{ activityInfo.endTime }}
        </div>
      </div>
      <div class="activity-info">
        <h1 class="activity-name">{{ activityInfo.activityName }}</h1>
        <div class="activity-tags">
          <span v-for="tag in activityInfo.tags" :key="tag" class="tag">{{
            tag
          }}</span>
        </div>
        <div class="activity-desc">{{ activityInfo.activityDesc }}</div>
      </div>
    </section>

    <!-- 发布商家信息 -->
    <section class="shop-section">
      <div class="shop-info">
        <img
          :src="shopInfo.shopPic"
          :alt="shopInfo.shopName"
          class="shop-logo"
        />
        <div class="shop-text">
          <div class="shop-name">{{ shopInfo.shopName }}</div>
          <div class="shop-rating">
            <div class="rating-stars">
              <i
                v-for="n in 5"
                :key="n"
                class="icon-star"
                :class="{ active: n <= shopInfo.rating }"
              ></i>
            </div>
            <span class="rating-score">{{ shopInfo.rating }}分</span>
          </div>
        </div>
        <button class="view-shop-btn" @click="viewShop">查看店铺</button>
      </div>
    </section>

    <!-- 活动规则 -->
    <section class="rules-section">
      <h2 class="section-title">活动规则</h2>
      <div class="rules-content">
        <div
          v-for="(rule, index) in activityInfo.rules"
          :key="index"
          class="rule-item"
        >
          <span class="rule-num">{{ index + 1 }}</span>
          <span class="rule-text">{{ rule }}</span>
        </div>
      </div>
    </section>

    <!-- 活动服务列表 -->
    <section class="services-section">
      <h2 class="section-title">活动服务</h2>
      <div class="service-list">
        <div
          v-for="service in serviceInfo"
          :key="service.id"
          class="service-card"
          :class="{ selected: selectedServices.includes(service.serviceId) }"
          @click="toggleService(service)"
        >
          <img
            :src="service.servicePic"
            :alt="service.serviceName"
            class="service-image"
          />
          <div class="service-info">
            <h3 class="service-name">{{ service.serviceName }}</h3>
            <p class="service-desc">{{ service.serviceDetails }}</p>
            <div class="service-price-row">
              <div class="price-info">
                <span class="current-price"
                  >¥{{ Math.floor(service.servicePrice * 0.8) }}</span
                >
                <span class="original-price">¥{{ service.servicePrice }}</span>
              </div>
              <span class="sale-count">已售{{ service.sold }}</span>
            </div>
          </div>
          <div class="select-indicator">
            <i class="icon-check"></i>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部下单栏 -->
    <div class="bottom-bar">
      <div class="selected-info">
        <span class="selected-count"
          >已选{{ selectedServices.length }}个服务</span
        >
        <div class="total-price">
          <span>合计：</span>
          <span class="price">¥{{ totalPrice }}</span>
        </div>
      </div>
      <button
        class="order-btn"
        :disabled="selectedServices.length === 0"
        @click="createOrder"
      >
        立即下单
      </button>
    </div>
    <!-- 下单弹出框 -->
    <order-dialog
      v-model="showOrderDialog"
      :selected-services="selectedServices"
      :total-price="totalPrice"
      :shop-info="shopInfo"
      @confirm="handleOrderConfirm"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { listActivity } from "@/api/shop/activity";
import { listShop } from "@/api/shop/shop";
import { listService } from "@/api/shop/service";
import OrderDialog from "@/components/order/OrderDialog.vue";
const router = useRouter();
const route = useRoute();
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    shopName: null,
    activityName: route.query.name,
    activityStatus: null,
    activityPic: null,
    activityDesc: null,
    activityDetails: null,
    activityStart: null,
    activityOver: null,
  },
  queryShopParams: {
    pageNum: 1,
    pageSize: 10,
    shopName: null,
    shopDesc: null,
    shopNumber: null,
    shopStatus: null,
    shopTimeStart: null,
    shopPic: null,
    shopAddress: null,
    phoneNumber: null,
    employeeName: null,
    bossName: null,
  },
  queryServiceParams: {
    pageNum: 1,
    pageSize: 10,
    serviceName: null,
    serviceCategory: null,
    serviceDetails: null,
    servicePic: null,
    serviceTime: null,
    servicePrice: null,
    sold: null,
    shopName: route.query.shopName,
    launchTime: null,
    downTime: null,
    serviceStatus: null,
  },
});
const { queryParams, queryShopParams, queryServiceParams, form } = toRefs(data);
// 活动信息
const activityInfo = ref(
  []
  //   id: 1,
  //   name: '新年特惠活动',
  //   banner: 'src/assets/images/activity1.jpg',
  //   startTime: '2024-01-01',
  //   endTime: '2024-01-31',
  //   tags: ['限时特惠', '新客专享'],
  //   description: '新年特惠活动，多种优惠服务组合，让您享受超值体验！',
  //   rules: [
  //     '活动时间：2024年1月1日至1月31日',
  //     '每位用户限购一次',
  //     '不与其他优惠同享',
  //     '如有疑问请联系客服'
  //   ],
  //   services: [
  //     {
  //       id: 1,
  //       name: '精油推拿套餐',
  //       description: '专业精油推拿，舒缓疲劳，改善睡眠',
  //       image: 'src/assets/images/banner2.jpg',
  //       originalPrice: 298,
  //       activityPrice: 198,
  //       soldCount: 156
  //     },
  //     {
  //       id: 2,
  //       name: '足疗套餐',
  //       description: '传统足疗技术，促进血液循环',
  //       image: 'src/assets/images/banner4.jpg',
  //       originalPrice: 198,
  //       activityPrice: 138,
  //       soldCount: 233
  //     },
  //     // ... 更多服务
  //   ]
  // }
);
// 获取活动信息
async function getActivityInfo() {
  await listActivity(queryParams.value).then((res) => {
    activityInfo.value = res.rows[0];
    queryShopParams.value.shopName = activityInfo.value.shopName;
    console.log(queryShopParams.value);
    getShopInfo();
  });
}
getActivityInfo();
// 商家信息
const shopInfo = ref(
  []
  //   {
  //   id: 1,
  //   name: '天之道足浴店',
  //   logo: 'src/assets/images/1.jpg',
  //   rating: 4.8
  // }
);
// 获取商家信息
async function getShopInfo() {
  await listShop(queryShopParams.value).then((res) => {
    shopInfo.value = res.rows[0];
  });
}
// 获取服务信息
const serviceInfo = ref([]);
async function getServiceInfo() {
  await listService(queryServiceParams.value).then((res) => {
    serviceInfo.value = res.rows;
  });
}
getServiceInfo();
// 已选服务
const selectedServices = ref([]);

// 计算总价
const totalPrice = computed(() => {
  return serviceInfo.value
    .filter((service) => selectedServices.value.includes(service.serviceId))
    .reduce(
      (total, service) => total + Math.floor(service.servicePrice * 0.8),
      0
    );
});

// 选择/取消选择服务
const toggleService = (service) => {
  const index = selectedServices.value.indexOf(service.serviceId);
  if (index === -1) {
    selectedServices.value.push(service.serviceId);
  } else {
    selectedServices.value.splice(index, 1);
  }
};

// 查看店铺
const viewShop = () => {
  router.push({
    path: "/shopDetail",
    query: { shopName: shopInfo.value.shopName },
  });
};

// 创建订单
const showOrderDialog = ref(false);
const createOrder = () => {
  if (selectedServices.value.length === 0) return;

  showOrderDialog.value = true;

  // router.push('/order/confirm')
};
// 确认下单方法
const handleOrderConfirm = (orderData) => {
  console.log("订单数据:", orderData);
  // 这里处理最终的下单逻辑
};
</script>

<style scoped>
.activity-detail {
  padding-bottom: 60px; /* 为底部栏留出空间 */
  background: #f5f5f5;
}

/* 活动头部样式 */
.activity-header {
  background: #fff;
  margin-bottom: 12px;
}

.activity-banner {
  position: relative;
  width: 100%;
  height: 300px; /* 调整banner高度 */
  overflow: hidden; /* 防止图片溢出 */
}

.activity-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
  object-position: center; /* 图片居中显示 */
}

.activity-time {
  position: absolute;
  bottom: 20px; /* 调整位置，远离底部一些 */
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 16px; /* 增加内边距 */
  border-radius: 4px;
  font-size: 14px;
  backdrop-filter: blur(4px); /* 添加毛玻璃效果 */
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .activity-banner {
    height: 200px; /* 移动端降低banner高度 */
  }

  .activity-time {
    bottom: 15px;
    left: 15px;
    padding: 4px 12px;
    font-size: 12px;
  }
}

/* 针对大屏幕 */
@media screen and (min-width: 1200px) {
  .activity-banner {
    height: 400px; /* 大屏幕增加banner高度 */
  }
}

.activity-info {
  padding: 15px;
}

.activity-name {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px;
}

.activity-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tag {
  padding: 2px 8px;
  background: #fff2f0;
  color: #ff4d4f;
  border-radius: 2px;
  font-size: 12px;
}

.activity-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 商家信息样式 */
.shop-section {
  background: #fff;
  padding: 15px;
  margin-bottom: 12px;
}

.shop-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-logo {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}

.shop-text {
  flex: 1;
}

.shop-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.rating-stars {
  color: #ffd700;
  font-size: 14px;
}

.rating-score {
  color: #666;
  font-size: 14px;
  margin-left: 5px;
}

.view-shop-btn {
  padding: 6px 12px;
  background: #fff;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.view-shop-btn:hover {
  background: #fff2f0;
}

/* 活动规则样式 */
.rules-section {
  background: #fff;
  padding: 15px;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 12px;
}

.rule-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.rule-num {
  color: #ff4d4f;
  font-weight: 500;
}

/* 服务列表样式 */
.services-section {
  background: #fff;
  padding: 15px;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}

.service-card:hover {
  border-color: #ff4d4f;
}

.service-card.selected {
  border-color: #ff4d4f;
  background: #fff2f0;
}

.service-image {
  width: 120px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.service-info {
  flex: 1;
}

.service-name {
  font-size: 16px;
  margin: 0 0 8px;
}

.service-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.service-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-price {
  color: #ff4d4f;
  font-size: 18px;
  font-weight: bold;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
  margin-left: 5px;
}

.sale-count {
  color: #999;
  font-size: 12px;
}

.select-indicator {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.service-card.selected .select-indicator {
  background: #ff4d4f;
  border-color: #ff4d4f;
}

/* 底部下单栏样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.selected-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.selected-count {
  color: #666;
  font-size: 14px;
}

.total-price {
  color: #666;
  font-size: 14px;
}

.total-price .price {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}

.order-btn {
  padding: 8px 24px;
  background: #ff4d4f;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.order-btn:hover {
  background: #ff7875;
}

.order-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

@media screen and (max-width: 768px) {
  .activity-banner {
    height: 150px;
  }

  .service-card {
    flex-direction: column;
  }

  .service-image {
    width: 100%;
    height: 160px;
  }

  .select-indicator {
    top: 8px;
    right: 8px;
  }
}
</style>
